<template>
  <div>
    <el-row class="bg_write">
      <!--  v-if="type != 'xf'" -->
      <el-row>
        <el-col :span="24" class="content_title">
          <el-col :span="12">
            <HeadTitle></HeadTitle>
          </el-col>
          <el-col :span="24">
            <!--                        <el-button  :loading='$store.state.isLoading' @click="import_excel()" type="primary" class="f_r" size="mini">导入</el-button>-->
          </el-col>
        </el-col>
      </el-row>
      <el-row class="home">
        <el-col :span="24" class="home_box">
          <div class="phone">
            <div class="phone_top">
              <img src="./../../assets/img/home/phone_header.png" alt />
            </div>
            <div class="coupon_body">
              <div class="coupon_notice">
                <img src="./../../assets/img/home/coupon_notice.png" alt />
                <div class="coupon_content">
                  <div class="coupon_title">
                    <p>{{type_name}}优惠卷</p>
                    <p>{{price}}元福利大放送</p>
                  </div>
                  <div class="coupon_box">
                    <div class="coupon_item" v-for="(item,i) in coupon_data" :key="i">
                      <div class="coupon_item_bj">
                        <img src="./../../assets/img/home/coupon_bj.png" alt />
                      </div>
                      <div class="coupon_item_content">
                        <div class="coupon_item_content_left">
                          <p>
                            <span>￥</span>
                            {{parseInt(item.money)}}
                          </p>
                        </div>
                        <div class="coupon_item_content_right">
                          <p>
                            {{item.title}}
                            <span>满{{item.cdn_xfm}}可用</span>
                          </p>
                          <!-- <p>使用期限:<span>{{now_time}}--{{get_end_time(item.lifetime)}}</span> -->
                          <p>{{now_time}}--{{get_end_time(item.lifetime)}}</p>
                          <p>{{item.new_desc || ""}}</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="index_control check_control">
                  <div class="control_item control_sanjiao on coupon_control" style="margin-top: -100px;">
                    <!-- <p >设置{{type_name}}红包：</p> -->
                    <p style="width: 100%; text-align:left;padding: 15px ">
                      设置会员等级：
                      <el-select v-model="coupon_control.rating" @change="sel_lev_change()" size="small" style="width: 100px;margin-left: 20px"
                        placeholder="请选择">
                        <el-option v-for="item in lev_options" :key="item.id" :label="item.title" :value="item.id"></el-option>
                      </el-select>
                    </p>
                    <p style="width: 100%; text-align:left;padding-left: 15px ">
                      是否开启：
                      <el-switch :width="82" v-model="coupon_control.is_open" active-color="#13ce66" inactive-color="#999999"
                        active-value="1" inactive-value="0" @change="sel_open_change()"></el-switch>
                    </p>
                    <el-form ref="form" :model="coupon_form" label-width="60px">
                      <div class="coupon_form">
                        <div class="coupon_form_item" v-for="(item,i) in coupon_data" :key="i">
                          <div class="coupon_form_item_left">
                            <img src="./../../assets/img/home/red.png" alt />
                          </div>
                          <div class="coupon_form_item_left_right">
                            <el-form-item label="选择红包：" :label-width="formLabelWidth">
                              <el-col :span="12" style="width: 250px">
                                <p style="text-align: left">{{item.title}}</p>
                                <!--                                                                <el-input v-model="item.title" placeholder="placeholder" size="small" style="width: 150px"></el-input>-->
                                <!--                                                                <el-button  :loading='$store.state.isLoading' type="primary" style="width:100px" size="small" >选择红包</el-button>-->
                              </el-col>
                            </el-form-item>
                            <el-form-item label="红包描述：" :label-width="formLabelWidth">
                              <el-col :span="12">
                                <el-input v-model="item.new_desc" size="small" placeholder="请输入红包描述" @change="change_desc(item)"
                                  style="width: 250px;"></el-input>
                              </el-col>
                            </el-form-item>
                          </div>
                          <div class="coupon_form_item_left_close">
                            <i class="el-icon-close" style="cursor: pointer" @click="del_coupon_list(item)"></i>
                          </div>
                        </div>

                        <div class="coupon_form_item_add">
                          <i class="el-icon-plus" @click="open_selcoupon()"></i>
                        </div>
                      </div>
                    </el-form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-row>
    
    <!-- <couponXfhb v-else :coupon_data="coupon_data" :type="coupon_form.type" @refresh="refresh"></couponXfhb> -->
    <coupon_dia :show="coupon_show" @receive_coupon="re_coupon" @close_coupon="close_recoupon"></coupon_dia>
  </div>
</template>

<script>
  import coupon_dia from "@/components/page/coupon_dialog.vue";
  import couponXfhb from "@/components/page/coupon_1.vue"
  import HeadTitle from "@/components/currency/HeadTitle.vue";

  export default {
    name: "coupon", //新手红包
    components: {
      HeadTitle,
      coupon_dia,
      couponXfhb
    },
    data() {
      return {
        now_time: this.get_now_time(),
        price: "",
        type_name: "",
        edit_coupon_shop: {},
        coupon_show: false,
        test: "",
        coupon_control: {
          is_open: 0,
          rating: 0
        },
        coupon_data: [{
          cdn_pid: "",
          cdn_sid: "",
          cdn_xfm: "",
          created_time: "",
          full_num: "",
          id: "",
          is_new: "",
          is_open_new: "",
          is_open_pj: "",
          is_open_xf: "",
          is_pj: "",
          is_xf: "",
          jf_change: "",
          lifetime: "",
          limit_lv: "",
          limit_num: "",
          money: "",
          new_desc: "",
          new_rating: "",
          page_get: "",
          pj_desc: "",
          pj_rating: "",
          receive_num: "",
          title: "",
          update_time: "",
          xf_desc: "",
          xf_rating: ""
        }],
        coupon_is_open: 0,
        coupon_form: {
          id: "",
          type: this.$route.query.action || "",
          desc: "",
          rating: "",
          is_open: ""
        },
        sel_uselev: "",
        lev_options: this.$store.state,

        formLabelWidth: "100px",
        type: ""
      };
    },
    created() {
      this.get_user_lev(); //得到用户等级
      this.get_coupon_list();
    },
    methods: {
      get_end_time(val) {
        var end_time = new Date();
        end_time = end_time.valueOf();
        end_time = end_time + val * 24 * 60 * 60 * 1000;
        end_time = new Date(end_time);
        var seperator1 = "-";
        var year = end_time.getFullYear();
        var month = end_time.getMonth() + 1;
        var strDate = end_time.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
      },
      get_now_time() {
        let now_time = new Date();
        var seperator1 = "-";
        var year = now_time.getFullYear();
        var month = now_time.getMonth() + 1;
        var strDate = now_time.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        console.log(currentdate);

        return currentdate;
      },
      sel_open_change() {
        //设置是否开放
        var params = {
          type: this.type,
          is_open: this.coupon_control.is_open
        };
        this.$api.getPage.limit_coupon_open(params).then(res => {
          if (res.data.code == 200) {
            this.$fnc.alertSuccess("修改成功");
          } else {
            this.$fnc.alertError(res.data.result);
          }
        });
      },
      sel_lev_change() {
        //设置用户等级
        var params = {
          type: this.type,
          rating: this.coupon_control.rating
        };
        this.$api.getPage.limit_coupon_lev(params).then(res => {
          if (res.data.code == 200) {
            this.$fnc.alertSuccess("修改成功");
          } else {
            this.$fnc.alertError(res.data.result);
          }
        });
      },
      open_selcoupon() {
        //选择优惠卷
        this.coupon_show = true;
      },

      del_coupon_list(item) {
        //删除优惠卷
        var params = {
          id: item.id,
          type: this.$route.query.action
        };
        this.$swal({
          title: "您确定要删除选中信息吗",
          text: "删除后将无法恢复，请谨慎操作！",
          type: "warning",
          showCancelButton: true,
          confirmButtonColor: "#DD6B55",
          confirmButtonText: "是的，我要删除",
          cancelButtonText: "容我三思"
        }).then(willDelete => {
          if (willDelete.value) {
            this.$api.getPage.del_coupon(params).then(res => {
              if (res.data.code == 200) {
                this.$fnc.alertSuccess("删除成功");
                this.get_coupon_list();
              } else {
                this.$swal(res.data.result, "error");
              }
            });
          }
        });
      },
      get_coupon_list() {
        //得到所设置的优惠卷
        this.type = this.$route.query.action;
        if (this.type == "new") {
          this.type_name = "新手";
        } else if (this.type == "xf") {
          this.type_name = "消费";
        } else if (this.type == "pj") {
          this.type_name = "评价";
        }
        var params = {
          type: this.type
        };
        this.$api.getPage.get_page_coupon(params).then(res => {
          if (res.data.code == 200) {
            this.coupon_data = res.data.result.data;
            this.coupon_control = res.data.result.other;
          }
        });
      },
      close_recoupon() {
        //关闭优惠卷
        this.coupon_show = false;
      },
      change_desc(item) {
        let params = this.coupon_form;
        params.id = item.id;
        params.desc = item.new_desc;
        this.$api.getPage.edit_coupon(params).then(res => {
          if (res.data.code == 200) {
            this.$fnc.alertSuccess("修改成功");
            this.get_coupon_list();
          } else {
            this.$fnc.alertError(res.data.result);
          }
        });
      },
      re_coupon(id) {
        //得到单条优惠卷,添加
        let params = this.coupon_form;
        params.id = id;
        params.desc = "";
        this.coupon_show = false;
        this.$api.getPage.edit_coupon(params).then(res => {
          if (res.data.code == 200) {
            this.$fnc.alertSuccess("添加成功");
            this.get_coupon_list();
          } else {
            this.$fnc.alertError(res.data.result);
          }
        });
      },
      get_user_lev() {
        //得到用户等级
        this.$api.getUser.getRatingList({}).then(res => {
          if (res.data.code == 200) {
            this.lev_options = res.data.result;
          }
        });
      },
      refresh(){
        //刷新页面数据
        this.get_coupon_list();
      }
    },
    watch: {
      $route(to, from) {
        console.log(to.path, from);
        this.get_user_lev(); //得到用户等级
        this.get_coupon_list();
        this.coupon_form.type = this.$route.query.action;
        this.type = this.$route.query.action;
        if (this.type == "new") {
          this.type_name = "新手";
        } else if (this.type == "xf") {
          this.type_name = "消费";
        } else if (this.type == "pj") {
          this.type_name = "评价";
        }
      },
      coupon_control(old, after) {
        this.coupon_form.rating = this.coupon_control.rating;
        this.coupon_form.is_open = this.coupon_control.is_open;
      },
      coupon_data(to, from) {
        var price = 0;
        this.coupon_data.forEach(item => {
          price = parseFloat(item.money) + price;
        });
        this.price = price;
      }
    }
  };
</script>

<style scoped>
  @import "../../assets/css/page.css";

  .transitionBody>div {
    overflow: auto;
  }

  .coupon_body {
    height: 600px;
    display: flex;
    justify-content: center;
    background: url("./../../assets/img/home/coupon_box_bj.png") no-repeat top left / 100% 100%;
    background-color: rgba(0, 0, 0, 0.3);
  }

  .coupon_notice {
    width: 85%;
    margin-top: 20px;
    position: relative;
  }

  .coupon_notice img {
    width: 100%;
  }

  .coupon_title {
    margin-top: 20px;
    /*height: 50px;*/
  }

  .coupon_content {
    width: 90%;
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    margin: auto;
    overflow: hidden;
  }

  .coupon_title>p:nth-of-type(1) {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 40px;
    color: #333333;
  }

  .coupon_title>p:nth-of-type(2) {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    line-height: 28px;
    color: #fc1f1f;
    letter-spacing: 2px;
  }

  .coupon_box {
    width: 305px;
    margin: 50px auto 0 auto;
    height: 250px;
    /*background-color: #999999;*/
    overflow-y: auto;
  }

  .coupon_item {
    width: 90%;
    height: 85px;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    position: relative;
  }

  .coupon_item_bj {
    width: 100%;
  }

  .coupon_item_bj img {
    width: 100%;
  }

  .coupon_item_content {
    width: 100%;
    position: absolute;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }

  .coupon_item_content_left {
    width: 35%;
  }

  .coupon_item_content_left p {
    font-size: 36px;
    color: #333333;
    text-align: center;
    font-weight: bold;
  }

  .coupon_item_content_left p span {
    font-size: 14px;
    color: #333333;
    font-weight: normal;
  }

  .coupon_item_content_right {
    width: 65%;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
  }

  .coupon_item_content_right p {
    width: 100%;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
  }

  .coupon_item_content_right p:nth-of-type(1) {
    font-size: 14px;
    font-weight: bold;
    color: #333333;
  }

  .coupon_item_content_right p:nth-of-type(1) span {
    font-size: 12px;
    color: #fc1f1f;
    padding-left: 5px;
  }

  .coupon_item_content_right p:nth-of-type(2) {
    font-size: 12px;
    font-weight: bold;
    color: #333333;
  }

  .coupon_item_content_right p:nth-of-type(2) span {
    font-size: 12px;
    font-weight: normal;
    padding-left: 5px;
    /* display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden; */
  }

  .coupon_item_content_right p:nth-of-type(3) {
    font-size: 12px;
    color: #333333;
    font-weight: bold;
  }

  .coupon_control {}

  .coupon_form {
    width: 95%;
    margin: 30px auto 0 auto;
    padding-bottom: 80px;
  }

  .coupon_form_item {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    background-color: #f0f0f0;
    padding: 10px 0;
    margin-bottom: 10px;
  }

  .coupon_form_item_left {
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .coupon_form_item_left img {
    width: 50%;
  }

  .coupon_form_item_left_right {
    width: 65%;

    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
  }

  .coupon_form_item_left_close {
    width: 10%;
    height: 200px;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
  }

  .coupon_form_item_left_close i {
    font-size: 20px;
  }

  .coupon_form_item_add {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
    margin-top: 20px;
    padding: 20px 0;
  }

  .coupon_form_item_add i {
    font-size: 60px;
  }
</style>
